<template>
    <div class="content">
      <div class="cont1">筛选条件</div>
        <!-- <div>表单搜索条件</div> -->
        <div class="select">
         <el-form :inline="true" :model="data.form" class="demo-form-inline">
        <el-form-item label="姓名或手机号：">
          <el-input v-model="data.form.value" placeholder="用户姓名/手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="select">查询</el-button>
        </el-form-item>
      </el-form>
      </div>
        <!-- 会员信息表格 -->
        <div class="person">
             <el-table :data="nowData" style="width: 100%" :header-cell-style="{background:'#438ACA',color:'#ffffff',textAlign:'center'}" :cell-style="{textAlign:'center'}">
                <el-table-column prop="id" label="用户id" width="80" />
                <el-table-column prop="userName" label="姓名" width="80"/>
                <el-table-column prop="phone" label="手机号" width="180" />
                <el-table-column prop="jiFen" label="积分" width="80" />
                <el-table-column prop="grade" label="等级" width="100"/>
                <el-table-column prop="daoFcs" label="到访次数"/>
                <el-table-column prop="time" label="最近使用时间" width="180" />
                <el-table-column prop="state" label="状态" width="80">
        <template v-slot="scope">
           <el-button v-if="scope.row.state==0" 
           style="background:green;color:white"
           size="small"
           @click="actionUpdate(scope.row)"
           >启用</el-button>
           <el-button v-if="scope.row.state==1" 
           style="background:grey;color:white"
           size="small"
           @click="actionUpdate(scope.row)"
           >禁用</el-button>
          </template>
                </el-table-column>
                <el-table-column  label="操作" width="190">
                <template v-slot="scope">
                    <el-button @click="update(scope.row)">编辑</el-button>
                    <el-button @click="AddJifen(scope.row)" >积分充值</el-button>
                </template>
                </el-table-column>
            </el-table>
             <div class="page">
                <div class="pageSpan">
                    共 <span> {{ maxpage }} </span> 页/   <span> {{ data.tableData.length }}</span> 条数据
                </div>
               <el-pagination layout="prev, pager, next" :total="1000" 
                @current-change="page"
                :current-page="data.nowpage"
                :page-count="maxpage" />
                <div class="pageSpan">跳至第 <input class="pageInput" type="text" v-model="data.pageNum" @keyup.enter="page(data.pageNum)" style="text-align:center"> 页
                </div>
            </div>
        </div>
    </div>
<!-- 编辑会员信息 -->
<el-dialog v-model="data.dialogFormVisible" title="会员信息">
    <el-form :model="data.form1">
      <el-form-item label="会员ID" :label-width="formLabelWidth">
        <el-input v-model="data.form1.id" autocomplete="off" />
      </el-form-item>
      <el-form-item label="所属分组" :label-width="formLabelWidth">
        <el-select v-model="data.form1.fenZu" placeholder="选择分组">
          <el-option label="A类用户" value="A类用户" />
          <el-option label="B类用户" value="B类用户" />
          <el-option label="C类用户" value="C类用户" />
        </el-select>
      </el-form-item>
    <el-form-item label="姓名" :label-width="formLabelWidth">
        <el-input v-model="data.form1.userName" autocomplete="off" />
     </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-radio-group v-model="data.form1.sex">
            <el-radio label="0">男</el-radio>
            <el-radio label="1">女</el-radio>
        </el-radio-group>
         </el-form-item>
        <el-form-item label="生日" :label-width="formLabelWidth">
        <el-input v-model="data.form1.birthday" autocomplete="off" />
         </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
        <el-input v-model="data.form1.email" autocomplete="off" />
         </el-form-item>
        <el-form-item label="手机号" :label-width="formLabelWidth">
        <el-input v-model="data.form1.phone" autocomplete="off" />
         </el-form-item>
        <el-form-item label="收货地址" :label-width="formLabelWidth">
        <el-input v-model="data.form1.address" autocomplete="off" />
         </el-form-item>
        <el-form-item label="可用积分" :label-width="formLabelWidth">
        <el-input v-model="data.form1.jiFen" autocomplete="off" disabled />   
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="save()">保存</el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 积分充值 -->
<el-dialog v-model="data.dialogFormVisible1" title="积分充值">
    <el-form :model="data.form2">
        <el-form-item label="充值积分" :label-width="formLabelWidth">
        <el-input v-model="data.form2.jiFen" autocomplete="off" />   
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="data.dialogFormVisible1 = false">取消</el-button>
        <el-button type="primary" @click="AddIntegral">充值</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import axios from 'axios';
import { onMounted,computed} from 'vue';
import {reactive,ref} from 'vue'
   onMounted(()=>{
     getAllMember();
  // axios({
  //   url:'http://localhost:3001/Allmember'
  //    }).then((res)=>{
  // console.log(res);
  // data.tableData = res.data.data
  //    })
   })
   const data = reactive(
    {
    state:'0',
    flag:false,
    jifen1:0,
    count:'',
    form:{value:''},
    form1:{    
    userName: '',
    id:'',
    fenZu: '',
    sex: '0',
    address: '',
    phone: '',
    jiFen:'',
    birthday:''
    },
    form2:{userName:'',jiFen:''},
    nowpage: 1,
    pageNum: 1,
    dialogFormVisible:false,
    dialogFormVisible1:false,
    tableData: []
    }
   )
const formLabelWidth = '140px'
// 翻页，跳转至第几页
const page = (num) => { 
    data.nowpage = parseInt(num) 
    }
//分页显示多少数据
let nowData = computed(() => {
    let startPage = (data.nowpage - 1) * 3;
    return data.tableData.slice(startPage, startPage + 3)
})
// 最大页码
const maxpage = computed(() => {
    return Math.ceil(data.tableData.length / 3);
})

// 启用状态
const actionUpdate=(row)=>{
  if(row.state==0){
    data.state = '1'
  }
  if(row.state==1){
    data.state = '0'
  }
  // 发起请求修改状态
    axios({
    url:'http://localhost:3001/xgState',
    method:'post',
    data:{
      state:data.state,
      id:row.id
    }
     }).then((res)=>{
  console.log(res,'启用状态请求数据');
  getAllMember()
     })
}
// 获取所有会员信息
const getAllMember=()=>{
  axios({
    url:'http://localhost:3001/Allmember'
     }).then((res)=>{
  console.log(res,'获取所有会员信息请求数据');
  for(let i = 0; i < res.data.data.length; i++) {
	res.data.data[i].time = 
		res.data.data[i].time.replace(/T/g, ' ').replace(/.[\d]{3}Z/, ' ')
}
  data.tableData = res.data.data
     })
}
// 编辑会员信息
const update=(row)=>{ 
    console.log(row,'编辑会员信息当前行数据');
    data.dialogFormVisible = true
   data.form1 = row
   
}
// 积分充值
const AddJifen=(row)=>{
  data.form2.userName = row.userName
  data.dialogFormVisible1 = true
  data.jifen1 = row.jiFen
}
// 点击充值按钮发起请求充值
const AddIntegral=()=>{
  // console.log(data.form2.jiFen,data.jifen1);
  // 可用积分与充值积分相加得到总积分传到后端修改积分
  data.count = (data.form2.jiFen - 0) + (data.jifen1 - 0)
  // console.log(data.count);
    axios({
    url:'http://localhost:3001/xiuGjf',
    method:'post',
    data:{
      jiFen:data.count,
      userName:data.form2.userName,
    }
     }).then((res)=>{
  console.log(res,'积分充值请求数据');
    data.form2.jiFen = ''
    data.dialogFormVisible1 = false
    getAllMember();
     })
  
}
// 点击保存按钮，发起修改请求
const save = ()=>{
  //  axios({
  //   url:'http://localhost:3001/update',
  //   method:'post',
  //   data:data.form1
  //    }).then((res)=>{
  // console.log(res,'修改信息请求数据');
    data.dialogFormVisible = false
  //     getAllMember();
  //    })
}
const select = ()=>{
    console.log(data.form.value);
    if(data.form.value){
         data.tableData = data.tableData.filter((item)=>{
           return item.userName.includes(data.form.value)||item.phone.includes(data.form.value)
          })
    }else{
      getAllMember()
    }
    data.form.value=''
}

</script>

<style scoped>
.cont1{
  background-color: #f2f2f2;
  line-height: 3rem;
  height: 3rem;
  font-size: 12px;
  width: 100%;

  padding:0rem 1rem;
  box-sizing:border-box;
}
	
.content{
    height: 100%;
    background-color: white;
    padding:1rem 1rem;
    box-sizing: border-box;
}
.select{
        padding: 1.5rem 1rem;
    }
.page{
    margin-top: 1.5rem;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    align-content: center;
    
}
.pageSpan{
    color: rgb(125, 125, 248);
    font-size: 14px;
}
span{ 
    color: red;
}
.pageInput {
    outline: none;
    margin: 0.1rem;
    width: 2rem;
    height: 0.7rem;
    padding: 0.5rem;
    border: 1px solid #e3e3e3;
    border-radius: 2px;
        }
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}

</style>